<template>
  <!--  运输地址-->
  <div class="transport-address-index">

    <order-module-title title="运输地址"/>
    <div class="transport-address-body" >
      <div class="body-item item-title right-border" >
        <span style="color: red">*</span>
        始发地
      </div>
      <div class="body-item item-title">
        <span style="color: red">*</span>
        目的地
      </div>
      <el-select class="body-item"
                 v-model="data.origin"
                 placeholder="请选择始发地">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-select class="body-item"
                 v-model="data.destination"
                 placeholder="请选择目的地">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-input class="body-item" v-model="data.originDetail" type="text"/>
      <el-input class="body-item" v-model="data.destinationDetail" type="text"/>

      <div style="clear: both"></div>
    </div>
  </div>
</template>

<script>
import OrderModuleTitle from "@/components/order/component/OrderModuleTitle";

export default {
  name: "TransportAddress",
  components:{
    OrderModuleTitle,
  },

  props:{
    info: {},
  },
  data() {
    return {
      data: {
        destination: '',
        origin: '',
        originDetail: '',
        destinationDetail: '',
      },
      options: [
        {
          value: '上海市',
          label: '上海市'
        }, {
          value: '深圳市',
          label: '深圳市'
        }, {
          value: '广州市',
          label: '广州市'
        }, {
          value: '北京',
          label: '北京'
        }, {
          value: '惠州市',
          label: '惠州市'
        }],
    }
  },
  created() {
    this.init()
  },
  watch:{
    info: function (newValue,oldValue){
      if(newValue !== undefined){
        this.data = this.info
      }
    }
  },
  methods: {
    async init() {

    },
  }
}
</script>

<style scoped lang="scss">

.transport-address-index {
  margin: 20px 0;


  .transport-address-body {

    margin-top: 10px;
    width: 881px;
    max-width: 881px;
    text-align: center;
    border-top: 1px black solid;
    border-left: 1px black solid;

    .body-item {
      width: 440px;
      float: left;
      height: 42px;
      line-height: 42px;
      font-size: 15px;
      border-right: 1px black solid;
      border-bottom: 1px black solid;
    }

    .item-title{
      background-color: #B3C0D1;
    }

  }


}


.right-border{
  border-right: 1px black solid;
}

</style>